<template>
	<view>
		<view class="con">
			<view class="box">
				<view class="box__info" v-if="info.goods">
					<image :src="$getImg(info.goods.image)" mode="aspectFill" class="box__pic"></image>
					<view class="">
						<view class="box__name u-line-1">
							{{info.goods.name}}
						</view>
						<view class="box__num">
							×{{info.num}}
						</view>
						<view class="box__price">
							{{info.goods.price}}
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view class="box__info" v-for="(item2,index) in info.goodslist" :key="index">
						<image :src="$getImg(item2.image)" mode="aspectFill" class="box__pic"></image>
						<view class="">
							<view class="box__name u-line-1">
								{{item2.name}}
							</view>
							<view class="box__num">
								×{{item2.num}}
							</view>
							<view class="box__price">
								{{item2.price}}
							</view>
						</view>
					</view>
				</view>
				<view class="box__c">
					<view class="u-flex u-flex-y-center u-flex-between">
						<view class="box__title">
							商品评分
						</view>
						<u-rate @change='change' count="5" v-model="value" :minCount='1' allowHalf size="24rpx"
							activeColor="#fff" inactiveColor="#ffffff" inactiveIcon='star-fill'></u-rate>
						<view class="box__num">
							{{value.toFixed(1)}}
						</view>
					</view>
					<!-- <view class="box__up">
						<image src="/static/goods/xj.png" class="box__up__icon" mode=""></image>
						添加照片
					</view> -->
					<u--textarea v-model="value2" maxlength='200' placeholder="使用体验怎么样？质量如何~" border='none'
						height='410rpx' count></u--textarea>
				</view>
			</view>
		</view>
		<view class="footer">
			<u-button text="确认发布" color="#E3432D"
				customStyle="width:638rpx;height:95rpx;border-radius:20rpx;font-size:30rpx;" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		orderInfo,
		submitRefund,
		finishOrder,
		goodsComment
	} from "@/request/api/order.js"
	export default {
		data() {
			return {
				value: 5,
				value2: '',
				id: null,
				info: {}
			};
		},
		onLoad(opt) {
			this.id = opt.id;
			orderInfo({
				id: this.id
			}).then(res => {
				this.info = res.data;

			})
		},
		methods: {
			submit() {
				if (!this.value2) {
					uni.$u.toast('请填写具体评价');
					return
				}
				let id = null;
				if (this.info.goods) {
					id = this.info.goods.id;
				} else {
					let ids = this.info.goodslist.map(item => {
						return item.goods_id
					})
					id = ids.join(",")
				}
				goodsComment({
					order_id: this.id,
					goods_id: id,
					score: this.value,
					content: this.value2
				}).then(res => {
					console.log(res)
					uni.navigateBack()
				})
			},
			change(e) {
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.box {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			&__info {
				padding: 34rpx 24rpx 24rpx;
				border-bottom: 1rpx solid #E9EAEC;
				display: flex;

			}

			&__pic {
				width: 168rpx;
				height: 168rpx;
				background: #896CAD;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 20rpx;
			}

			&__name {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 48rpx;
				width: 457rpx;
			}

			&__num {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #727272;
				line-height: 42rpx;
			}

			&__price {
				font-family: DINNextLTPro, DINNextLTPro;
				font-weight: 500;
				font-size: 38rpx;
				color: #FD2A00;
				line-height: 38rpx;
				margin-top: 40rpx;

				&::before {
					content: "￥";
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 800;
					font-size: 25rpx;
					color: #FD2A00;
					line-height: 25rpx;
					margin-bottom: 10rpx;
				}
			}

			&__c {
				padding: 37rpx 23rpx;
			}

			&__title {
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #1E1E1E;
				line-height: 25rpx;
				flex: 1;
			}

			&__num {
				font-family: DINNextLTPro;
				font-weight: 500;
				font-size: 32rpx;
				color: #000001;
				line-height: 32rpx;
				margin-top: 10rpx;
				margin-left: 7rpx;
			}

			&__up {
				height: 132rpx;
				background: #F6F6F6;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #727272;
				line-height: 36rpx;
				justify-content: center;

				&__icon {
					width: 44rpx;
					height: 43rpx;
				}
			}
		}

	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 60rpx;
	}
</style>